React Testing Library: Komponens tesztelési bevált gyakorlatok globális csapatok számára

A webfejlesztés folyamatosan fejlődő világában kulcsfontosságú a React alkalmazások megbízhatóságának és minőségének biztosítása. Ez különösen igaz a globális csapatokra, amelyek különböző felhasználói bázissal és akadálymentességi követelményekkel rendelkező projekteken dolgoznak. A React Testing Library (RTL) egy erőteljes és felhasználó-központú megközelítést kínál a komponensek teszteléséhez. A hagyományos tesztelési módszerekkel ellentétben, amelyek az implementációs részletekre összpontosítanak, az RTL arra ösztönöz, hogy a komponenseket úgy tesztelje, ahogyan egy felhasználó interakcióba lépne velük, ami robusztusabb és karbantarthatóbb teszteket eredményez. Ez az átfogó útmutató bemutatja az RTL használatának legjobb gyakorlatait a React projektekben, különös tekintettel a globális közönség számára megfelelő alkalmazások építésére.

Miért a React Testing Library?

Mielőtt belemerülnénk a legjobb gyakorlatokba, fontos megérteni, miért emelkedik ki az RTL a többi tesztelési könyvtár közül. Íme néhány kulcsfontosságú előny:

• Felhasználó-központú megközelítés: Az RTL a komponensek felhasználói szemszögből történő tesztelését helyezi előtérbe. Ugyanazokkal a módszerekkel lép interakcióba a komponenssel, mint egy felhasználó (pl. gombokra kattintás, beviteli mezőkbe gépelés), ami valósághűbb és megbízhatóbb tesztelési élményt biztosít.
• Akadálymentesség-fókuszú: Az RTL elősegíti az akadálymentes komponensek írását azáltal, hogy arra ösztönöz, hogy a fogyatékkal élő felhasználókat is figyelembe véve tesztelje őket. Ez összhangban van a globális akadálymentességi szabványokkal, mint például a WCAG.
• Csökkentett karbantartási igény: Az implementációs részletek (pl. belső állapot, specifikus függvényhívások) tesztelésének elkerülésével az RTL tesztek kisebb valószínűséggel törnek el a kód refaktorálása során. Ez karbantarthatóbb és ellenállóbb teszteket eredményez.
• Javított kódtervezés: Az RTL felhasználó-központú megközelítése gyakran jobb komponens tervezéshez vezet, mivel arra kényszerít, hogy elgondolkodjon azon, hogyan fognak a felhasználók interakcióba lépni a komponensekkel.
• Közösség és ökoszisztéma: Az RTL nagy és aktív közösséggel büszkélkedhet, amely bőséges erőforrásokat, támogatást és bővítményeket biztosít.

A tesztkörnyezet beállítása

Az RTL használatának megkezdéséhez be kell állítania a tesztkörnyezetet. Íme egy alapvető beállítás a Create React App (CRA) használatával, amely előre konfigurálva tartalmazza a Jestet és az RTL-t:

npx create-react-app my-react-app
cd my-react-app
npm install --save-dev @testing-library/react @testing-library/jest-dom

Magyarázat:

• `npx create-react-app my-react-app`: Létrehoz egy új React projektet a Create React App segítségével.
• `cd my-react-app`: Belép az újonnan létrehozott projekt könyvtárába.
• `npm install --save-dev @testing-library/react @testing-library/jest-dom`: Telepíti a szükséges RTL csomagokat fejlesztési függőségként. A `@testing-library/react` biztosítja az alapvető RTL funkcionalitást, míg a `@testing-library/jest-dom` hasznos Jest matchereket ad a DOM-mal való munkához.

Ha nem CRA-t használ, akkor külön kell telepítenie a Jestet és az RTL-t, és konfigurálnia kell a Jestet az RTL használatához.

A komponens tesztelés bevált gyakorlatai a React Testing Library-vel

1. Írjon a felhasználói interakciókhoz hasonló teszteket

Az RTL alapelve, hogy a komponenseket úgy teszteljük, ahogy egy felhasználó tenné. Ez azt jelenti, hogy arra kell összpontosítani, amit a felhasználó lát és csinál, nem pedig a belső implementációs részletekre. Használja az RTL által biztosított `screen` objektumot az elemek lekérdezésére a szövegük, szerepük vagy akadálymentességi címkéik alapján.

Példa: Egy gombkattintás tesztelése

Tegyük fel, hogy van egy egyszerű gomb komponense:

// Button.js
import React from 'react';

function Button({ onClick, children }) {
  return {children};
}

export default Button;

Így tesztelné az RTL használatával:

// Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  it('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(Click Me);

    const buttonElement = screen.getByText('Click Me');
    fireEvent.click(buttonElement);

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Magyarázat:

• `render(Click Me)`: Rendereli a Button komponenst egy mock `onClick` kezelővel.
• `screen.getByText('Click Me')`: Lekérdezi a dokumentumból azt az elemet, amely a "Click Me" szöveget tartalmazza. Így azonosítaná egy felhasználó a gombot.
• `fireEvent.click(buttonElement)`: Szimulál egy kattintási eseményt a gomb elemen.
• `expect(handleClick).toHaveBeenCalledTimes(1)`: Ellenőrzi, hogy az `onClick` kezelő egyszer lett meghívva.

Miért jobb ez, mint az implementációs részletek tesztelése: Képzelje el, hogy refaktorálja a Button komponenst, hogy egy másik eseménykezelőt használjon, vagy megváltoztatja a belső állapotot. Ha a specifikus eseménykezelő függvényt tesztelte volna, a tesztje elromlana. A felhasználói interakcióra (a gombra kattintásra) összpontosítva a teszt a refaktorálás után is érvényes marad.

2. Priorizálja a lekérdezéseket a felhasználói szándék alapján

Az RTL különböző lekérdezési módszereket biztosít az elemek megtalálásához. Priorizálja a következő lekérdezéseket ebben a sorrendben, mivel ezek tükrözik a legjobban, hogyan érzékelik és hogyan lépnek interakcióba a felhasználók a komponensekkel:

• getByRole: Ez a lekérdezés a leginkább akadálymentes, és ennek kell lennie az első választásának. Lehetővé teszi az elemek megtalálását az ARIA szerepeik alapján (pl. button, link, heading).
• getByLabelText: Ezzel kereshet elemeket, amelyek egy adott címkéhez vannak társítva, például beviteli mezőket.
• getByPlaceholderText: Ezzel kereshet beviteli mezőket a helykitöltő szövegük alapján.
• getByText: Ezzel kereshet elemeket a szöveges tartalmuk alapján. Legyen specifikus, és kerülje az általános szövegek használatát, amelyek több helyen is megjelenhetnek.
• getByDisplayValue: Ezzel kereshet beviteli mezőket az aktuális értékük alapján.

Példa: Egy űrlap beviteli mezőjének tesztelése

// Input.js
import React from 'react';

function Input({ label, placeholder, value, onChange }) {
  return (
    

      {label}
      
    
  );
}

export default Input;

Így tesztelheti az ajánlott lekérdezési sorrendet használva:

// Input.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Input from './Input';

describe('Input Component', () => {
  it('updates the value when the user types', () => {
    const handleChange = jest.fn();
    render();

    const inputElement = screen.getByLabelText('Name');
    fireEvent.change(inputElement, { target: { value: 'John Doe' } });

    expect(handleChange).toHaveBeenCalledTimes(1);
    expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ target: { value: 'John Doe' } }));
  });
});

Magyarázat:

• `screen.getByLabelText('Name')`: A `getByLabelText` segítségével keresi meg a "Name" címkéhez társított beviteli mezőt. Ez a leginkább akadálymentes és felhasználóbarát módja a beviteli mező megtalálásának.

3. Kerülje az implementációs részletek tesztelését

Ahogy korábban említettük, kerülje a belső állapot, a függvényhívások vagy a specifikus CSS osztályok tesztelését. Ezek olyan implementációs részletek, amelyek változhatnak, és törékeny tesztekhez vezethetnek. Összpontosítson a komponens megfigyelhető viselkedésére.

Példa: Kerülje az állapot közvetlen tesztelését

Ahelyett, hogy azt tesztelné, hogy egy adott állapotváltozó frissül-e, tesztelje azt, hogy a komponens a megfelelő kimenetet rendereli-e az adott állapot alapján. Például, ha egy komponens egy logikai állapotváltozó alapján jelenít meg egy üzenetet, tesztelje, hogy az üzenet megjelenik-e vagy elrejtőzik-e, ahelyett, hogy magát az állapotváltozót tesztelné.

4. Használjon `data-testid`-t speciális esetekben

Bár általában a legjobb elkerülni a `data-testid` attribútumok használatát, vannak olyan speciális esetek, amikor hasznosak lehetnek:

• Szemantikai jelentés nélküli elemek: Ha egy olyan elemet kell megcéloznia, amelynek nincs értelmes szerepe, címkéje vagy szövege, használhat `data-testid`-t.
• Bonyolult komponensstruktúrák: Bonyolult komponensstruktúrákban a `data-testid` segíthet a specifikus elemek megcélzásában anélkül, hogy törékeny szelektorokra támaszkodna.
• Akadálymentességi tesztelés: A `data-testid` használható specifikus elemek azonosítására akadálymentességi tesztelés során olyan eszközökkel, mint a Cypress vagy a Playwright.

Példa: `data-testid` használata

// MyComponent.js
import React from 'react';

function MyComponent() {
  return (
    

      
This is my component.
    
  );
}

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component container', () => {
    render();
    const containerElement = screen.getByTestId('my-component-container');
    expect(containerElement).toBeInTheDocument();
  });
});

Fontos: Használja a `data-testid`-t takarékosan és csak akkor, ha más lekérdezési módszerek nem megfelelőek.

5. Írjon értelmes tesztleírásokat

A tiszta és tömör tesztleírások kulcsfontosságúak az egyes tesztek céljának megértéséhez és a hibák hibakereséséhez. Használjon leíró neveket, amelyek egyértelműen elmagyarázzák, mit ellenőriz a teszt.

Példa: Jó vs. Rossz tesztleírások

Rossz: `it('works')`

Jó: `it('displays the correct greeting message')`

Még jobb: `it('displays the greeting message "Hello, World!" when the name prop is not provided')`

A jobb példa egyértelműen leírja a komponens elvárt viselkedését specifikus körülmények között.

6. Tartsa a teszteket kicsinek és fókuszáltnak

Minden tesztnek a komponens viselkedésének egyetlen aspektusának ellenőrzésére kell összpontosítania. Kerülje a nagy, összetett tesztek írását, amelyek több forgatókönyvet is lefednek. A kicsi, fókuszált teszteket könnyebb megérteni, karbantartani és hibakeresést végezni rajtuk.

7. Használjon tesztdublőröket (mockokat és spy-okat) megfelelően

A tesztdublőrök hasznosak a tesztelt komponens elszigetelésére a függőségeitől. Használjon mockokat és spy-okat külső szolgáltatások, API-hívások vagy más komponensek szimulálására.

Példa: API-hívás mockolása

// UserList.js
import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data);
    }

    fetchUsers();
  }, []);

  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
}

export default UserList;

// UserList.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import UserList from './UserList';

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
    ]),
  })
);

describe('UserList Component', () => {
  it('fetches and displays a list of users', async () => {
    render();

    // Wait for the data to load
    await waitFor(() => screen.getByText('John Doe'));

    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
  });
});

Magyarázat:

• `global.fetch = jest.fn(...)`: Mockolja a `fetch` függvényt, hogy egy előre meghatározott felhasználói listát adjon vissza. Ez lehetővé teszi a komponens tesztelését anélkül, hogy valódi API végpontra támaszkodna.
• `await waitFor(() => screen.getByText('John Doe'))`: Megvárja, amíg a "John Doe" szöveg megjelenik a dokumentumban. Ez azért szükséges, mert az adatok aszinkron módon töltődnek be.

8. Tesztelje a szélsőséges eseteket és a hibakezelést

Ne csak a boldog utat (happy path) tesztelje. Győződjön meg róla, hogy teszteli a szélsőséges eseteket, a hibaforgatókönyveket és a határértékeket is. Ez segít a potenciális problémák korai azonosításában és biztosítja, hogy a komponens kecsesen kezelje a váratlan helyzeteket.

Példa: Hibakezelés tesztelése

Képzeljen el egy komponenst, amely adatokat kér le egy API-tól, és hibaüzenetet jelenít meg, ha az API-hívás sikertelen. Írjon egy tesztet annak ellenőrzésére, hogy a hibaüzenet helyesen jelenik-e meg, amikor az API-hívás sikertelen.

9. Összpontosítson az akadálymentességre

Az akadálymentesség kulcsfontosságú az inkluzív webalkalmazások létrehozásához. Használja az RTL-t a komponensek akadálymentességének tesztelésére és annak biztosítására, hogy megfeleljenek az olyan akadálymentességi szabványoknak, mint a WCAG. Néhány kulcsfontosságú akadálymentességi szempont:

• Szemantikus HTML: Használjon szemantikus HTML elemeket (pl. ``, `
• ARIA attribútumok: Használjon ARIA attribútumokat további információk biztosítására az elemek szerepéről, állapotáról és tulajdonságairól, különösen az egyedi komponensek esetében.
• Billentyűzet-navigáció: Győződjön meg róla, hogy minden interaktív elem elérhető billentyűzet-navigációval.
• Színkontraszt: Használjon elegendő színkontrasztot annak biztosítására, hogy a szöveg olvasható legyen a gyengénlátó felhasználók számára.
• Képernyőolvasó-kompatibilitás: Tesztelje a komponenseket képernyőolvasóval, hogy biztosítsa, hogy értelmes és érthető élményt nyújtanak a látássérült felhasználók számára.

Példa: Akadálymentesség tesztelése `getByRole` segítségével

// MyAccessibleComponent.js
import React from 'react';

function MyAccessibleComponent() {
  return (
    X
  );
}

export default MyAccessibleComponent;

// MyAccessibleComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyAccessibleComponent from './MyAccessibleComponent';

describe('MyAccessibleComponent', () => {
  it('renders an accessible button with the correct aria-label', () => {
    render();
    const buttonElement = screen.getByRole('button', { name: 'Close' });
    expect(buttonElement).toBeInTheDocument();
  });
});

Magyarázat:

• `screen.getByRole('button', { name: 'Close' })`: A `getByRole` segítségével keres egy gomb elemet a "Close" akadálymentes névvel. Ez biztosítja, hogy a gomb megfelelően van címkézve a képernyőolvasók számára.

10. Integrálja a tesztelést a fejlesztési munkafolyamatba

A tesztelésnek a fejlesztési munkafolyamat szerves részének kell lennie, nem pedig utólagos gondolatnak. Integrálja a teszteket a CI/CD folyamatba, hogy automatikusan fussanak, amikor kódot commitolnak vagy telepítenek. Ez segít a hibák korai elkapásában és a regressziók megelőzésében.

11. Vegye figyelembe a lokalizációt és a nemzetköziesítést (i18n)

Globális alkalmazások esetében kulcsfontosságú a lokalizáció és a nemzetköziesítés (i18n) figyelembevétele a tesztelés során. Győződjön meg róla, hogy a komponensek helyesen jelennek meg különböző nyelveken és területi beállításokban.

Példa: Lokalizáció tesztelése

Ha egy olyan könyvtárat használ, mint a `react-intl` vagy az `i18next` a lokalizációhoz, mockolhatja a lokalizációs kontextust a tesztekben annak ellenőrzésére, hogy a komponensek a megfelelő lefordított szöveget jelenítik-e meg.

12. Használjon egyedi renderelő függvényeket az újrafelhasználható beállításokhoz

Nagyobb projekteken dolgozva előfordulhat, hogy ugyanazokat a beállítási lépéseket ismételgeti több tesztben is. A duplikáció elkerülése érdekében hozzon létre egyedi renderelő függvényeket, amelyek magukba foglalják a közös beállítási logikát.

Példa: Egyedi renderelő függvény

// test-utils.js
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import theme from './theme';

const AllTheProviders = ({ children }) => {
  return (
    
      {children}
    
  );
}

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@testing-library/react'

// override render method
export { customRender as render }

// MyComponent.test.js
import React from 'react';
import { render, screen } from './test-utils'; // Import the custom render
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly with the theme', () => {
    render();
    // Your test logic here
  });
});

Ez a példa egy egyedi renderelő függvényt hoz létre, amely a komponenst egy ThemeProvider-be csomagolja. Ez lehetővé teszi a témától függő komponensek egyszerű tesztelését anélkül, hogy minden tesztben meg kellene ismételni a ThemeProvider beállítását.

Következtetés

A React Testing Library erőteljes és felhasználó-központú megközelítést kínál a komponensek teszteléséhez. Ezen bevált gyakorlatok követésével karbantartható, hatékony teszteket írhat, amelyek a felhasználói viselkedésre és az akadálymentességre összpontosítanak. Ez robusztusabb, megbízhatóbb és inkluzívabb React alkalmazásokhoz vezet egy globális közönség számára. Ne felejtse el előtérbe helyezni a felhasználói interakciókat, kerülni az implementációs részletek tesztelését, összpontosítani az akadálymentességre és integrálni a tesztelést a fejlesztési munkafolyamatába. Ezen elvek elfogadásával magas minőségű React alkalmazásokat építhet, amelyek megfelelnek a felhasználók igényeinek szerte a világon.

Főbb tanulságok:

• Fókuszáljon a felhasználói interakciókra: Tesztelje a komponenseket úgy, ahogy egy felhasználó interakcióba lépne velük.
• Priorizálja az akadálymentességet: Biztosítsa, hogy a komponensei hozzáférhetőek legyenek a fogyatékkal élő felhasználók számára.
• Kerülje az implementációs részleteket: Ne tesztelje a belső állapotot vagy a függvényhívásokat.
• Írjon tiszta és tömör teszteket: Tegye a teszteket könnyen érthetővé és karbantarthatóvá.
• Integrálja a tesztelést a munkafolyamatába: Automatizálja a teszteket és futtassa őket rendszeresen.
• Vegye figyelembe a globális közönséget: Biztosítsa, hogy a komponensei jól működjenek különböző nyelveken és területi beállításokban.